<template>
  <div class="container">
    <div class="data">
      <div class="data_park" v-for="i in data" :key="i.name">
        <div class="data_park_msg">
          <div class="data_park_msg_inner">{{ i.name }}</div>
        </div>
        <div class="data_park_child">
          <div class="data_park_child_item"  v-for="j in i.children" :key="j.name">
            <div class="data_park_child_item_msg">
              <div class="data_park_child_item_msg_inner">{{j.name}}</div>
              <div class="data_park_child_item_msg_line"></div>
            </div>
            <div class="data_park_child_item_msg_content">
              <div class="data_park_child_item_msg_content_item" v-for="k in j.children" :key="k.name">
                <div class="data_park_child_item_msg_content_item_inner">
                  {{k.name}}{{k.usage}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  <YB_WaterLine-->
<!--    :width="500"-->
<!--    :height="50"-->
<!--    :background="'#f1f1f1'"-->
<!--    :lineColor="'#00CC66'"-->
<!--  ></YB_WaterLine>-->
</template>

<script setup>
import { ref } from "vue";
// import YB_WaterLine from '@/components/YB_WaterLine/index.vue'
const data = ref([
  {
    name:'江南大学',
    usage:1000,
    children:[
      {
        name:'杏园公寓1号楼',
        usage:1000,
        leakage:100,
        children:[
          {
            name:'杏园公寓1号楼加压总表',
            usage:100,
          },{
            name:'杏园公寓1号楼直供总表',
            usage:100,
          },{
            name:'杏园公寓11号楼直供总表',
            usage:100,
          },{
            name:'杏园公寓12号楼直供总表',
            usage:100,
          },{
            name:'杏园公寓13号楼直供总表',
            usage:100,
          }
        ]
      },{
        name:'杏园公寓2号楼',
        usage:1000,
        leakage:100,
        children:[
          {
            name:'杏园公寓2号楼加压总表',
            usage:100,
          },{
            name:'杏园公寓2号楼直供总表',
            usage:100,
          }
        ]
      },{
        name:'杏园公寓3号楼',
        usage:1000,
        leakage:100,
        children:[
          {
            name:'杏园公寓3号楼加压总表',
            usage:100,
          },{
            name:'杏园公寓3号楼直供总表',
            usage:100,
          }
        ]
      },{
        name:'杏园公寓4号楼',
        usage:1000,
        leakage:100,
        children:[
          {
            name:'杏园公寓4号楼加压总表',
            usage:100,
          },{
            name:'杏园公寓4号楼直供总表',
            usage:100,
          }
        ]
      }
    ]
  }
])
</script>

<style scoped lang="scss">
.container{
  padding:50px;
  .data{
    &_park{
      display: flex;
      flex-wrap: nowrap;
      &_msg{
        width:150px;
        margin-right: 100px;
        display: flex;
        position: relative;
        &:before,&:after{
          position: absolute;
          display: block;
          content: '';
        }
        &:before{
          width:50px;
          height:2px;
          right:-50px;
          top:115px;
          border-top:2px dashed #A4D2D2;
          transform: translateY(-50%);
        }
        &:after{
          width:2px;
          border-left:2px dashed #A4D2D2;
          height:calc(100% - 230px);
          right:-50px;
          top:50%;
          transform: translateY(-50%);
        }
        &_inner{
          position: relative;
          left:50%;
          top:100px;
        }
      }
      &_child{
        &_item{
          display: flex;
          flex-wrap: nowrap;
          &:not(:nth-last-child(1)){
            margin-bottom: 30px;
          }
          &_msg{
            width:200px;
            margin-right: 100px;
            display: flex;
            position: relative;
            &:before,&:after,&_line{
              position: absolute;
              display: block;
              content: '';
            }
            &:before{
              width:50px;
              height:2px;
              border-top:2px dashed #A4D2D2;
              left:-51px;
              top:50%;
              transform: translateY(-50%);
            }
            &:after{
              width:50px;
              height:2px;
              right:-51px;
              border-top:2px dashed #A4D2D2;
              top:50%;
              transform: translateY(-50%);
            }
            &_line{
              width:2px;
              height:calc(100% - 100px);
              border-right:2px dashed #A4D2D2;
              right:-51px;
              top:50%;
              transform: translateY(-50%);
            }
            &_inner{
              margin:auto;
            }
            &_content{
              &_item{
                width:300px;
                height:100px;
                display: flex;
                position: relative;
                &:before{
                  position: absolute;
                  display: block;
                  content: '';
                }
                &:before{
                  width:50px;
                  height:2px;
                  left:-51px;
                  top:50%;
                  border-top:2px dashed #A4D2D2;
                  transform: translateY(-50%);
                }
                &:not(:nth-last-child(1)){
                  margin-bottom: 30px;
                }
                &_inner{
                  margin:auto;
                }
              }
            }
          }
        }
      }
    }

  }
}

.line{
  width:500px;
  height:20px;
  background: #f1f1f1;
  .line2 {

  }
}

</style>